<template>
	<div id="">
		<div id="" style="width: 100vw;height: 10vh;">

		</div>
		<div class="tabbar">
			<div class="tabbar_list">
				<router-link to="/">
					<div>
						<van-icon name="wap-home-o" size="30px" />
						<van-icon name="like" v-show="home" size="0.1rem" color="orange"
							style="position: absolute;left: 14%;" />
					</div>
					<div>首页</div>
				</router-link>
			</div>
			<div class="tabbar_list">
				<router-link to="/about">
					<div>
						<van-icon name="records" size="30px" />
						<van-icon name="like" v-show="about" size="0.1rem" color="orange"
							style="position: absolute;left: 39%;" />
					</div>
					<div>论坛</div>
				</router-link>
			</div>
			<div class="tabbar_list">
				<router-link to="/cart">
					<div>
						<van-icon name="shopping-cart-o" size="30px" />
						<van-icon name="like" v-show="cart" size="0.1rem" color="orange"
							style="position: absolute;left: 64%;" />
					</div>
					<div>购物车</div>
				</router-link>
			</div>
			<div class="tabbar_list">
				<router-link to="/main">
					<div>
						<van-icon name="contact" size="30px" />
						<van-icon name="like" v-show="main" size="0.1rem" color="orange"
							style="position: absolute;left: 89%;" />
					</div>
					<div>我的</div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cart: '',
				home:'',
				about:'',
				main:''
			}
		},
		created() {
			this.home=this.$parent.home
			this.cart=this.$parent.cart
			this.about=this.$parent.about
			this.main=this.$parent.main
		}
		
	}
</script>

<style scoped="scoped">
	.tabbar a {

		color: #999999;
	}

	.tabbar a.router-link-exact-active {
		font-weight: bold;
		color: #222222;
	}

	.tabbar {
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		height: 8vh;
		align-items: center;
		
	}

	.tabbar_list {
		width: 25vw;
		font-size: 14px;
	}
</style>
